<template>
  <div class="page-container">
    <div class="admin-container">
      <!-- 搜索卡片 -->
      <div class="search-card">
        <el-form :model="searchForm" label-width="100px" class="search-form">
          <div class="search-grid">
            <el-form-item label="管理员昵称">
              <el-input v-model="searchForm.nickname" placeholder="请输入管理员昵称" prefix-icon="User" clearable
                style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="管理员账号">
              <el-input v-model="searchForm.account" placeholder="请输入管理员账号" prefix-icon="Key" clearable
                style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getLists" :icon="Search">
                搜索
              </el-button>
              <el-button @click="resetSearch" :icon="RefreshRight" plain>
                重置
              </el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>

      <!-- 数据表格 -->
      <div class="table-card">
        <div class="table-header">
          <div class="table-title">
            <el-icon>
              <UserFilled />
            </el-icon>
            <span>管理员列表</span>
            <el-tag type="info" size="small">{{ pager.total }} 条记录</el-tag>
          </div>
          <div class="header-actions">
            <el-button type="primary" @click="handleAdd" :icon="Plus" size="large">
              添加管理员
            </el-button>
          </div>
        </div>

        <el-table :data="lists" style="width: 100%" empty-text="暂无数据" class="modern-table"
          :header-cell-style="{ background: '#f8fafc', color: '#374151', fontWeight: '600' }">
          <el-table-column prop="id" label="ID" width="80" align="center" />
          <el-table-column prop="nickname" label="管理员昵称" align="center" />
          <el-table-column prop="username" label="管理员头像" align="center" >
            <template  #default="scope">
              <el-avatar shape="square" :size="35" :src="scope.row.avatar"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="account" label="管理员账号" align="center"   />
          <el-table-column prop="role_name" label="角色" align="center">
            <template #default="scope">
              <el-tag type="success" effect="light">
                {{ scope.row.role_name }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100" align="center">
            <template #default="scope">
              <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2"
                @change="changeEdit(scope.row)" active-text="启用" inactive-text="禁用" inline-prompt />
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="180" align="center">
            <template #default="scope">
              <div class="time-info">
                <div>{{ formatDate(scope.row.created_at) }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="更新时间" width="180" align="center">
            <template #default="scope">
              <div class="time-info">
                <div>{{ formatDate(scope.row.updated_at) }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" align="center" fixed="right">
            <template #default="scope">
              <div class="action-buttons">
                <el-button size="small" type="primary" :icon="Edit" @click="handleEdit(scope.row)">
                  编辑
                </el-button>
                <el-button size="small" type="danger" :icon="Delete" @click="handleDelete(scope.row)">
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination background v-model:current-page="pager.page" v-model:page-size="pager.page_size"
            layout="total, sizes, prev, pager, next, jumper" :total="pager.total" :page-sizes="[10, 30, 50, 100]"
            @current-change="handleCurrentChange" @size-change="getLists" />
        </div>
      </div>
    </div>
  </div>
  <edit ref="editRef" @success="getLists" />
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { getAdminListApi, deleteAdminApi, updateAdminApi } from '@/api/auth'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Edit, Delete, Search, RefreshRight, UserFilled } from '@element-plus/icons-vue'
import edit from './edit.vue'
const editRef = ref()

const formatDate = (dateString: string) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const lists = ref([])

const searchForm = ref<any>({
  nickname: '',
  account: '',
  status: '',
})

const pager = reactive<any>({
  page: 1,
  page_size: 10,
  total: 0,
})
const getLists = async () => {
  const { data } = await getAdminListApi({
    nickname: searchForm.value.nickname,
    account: searchForm.value.account,
    page: pager.page,
    page_size: pager.page_size,
  })
  lists.value = data.list
  pager.total = data.total
  pager.page_size = data.per_page
  pager.page = data.current_page
}
const handleAdd = () => {
  editRef.value.open('add')
  editRef.value.setFormData()
  editRef.value.getRoleList()
}
const changeEdit = async (row: any) => {
  await updateAdminApi(row)
  getLists()
}
const handleEdit = (row: any) => {
  editRef.value.open('edit')
  editRef.value.setFormData(row)
  editRef.value.getRoleList()
}

const handleDelete = async (row: any) => {
  ElMessageBox.confirm('时候永久删除 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteAdminApi(row.id).then(() => {
      ElMessage.success('删除成功')
      getLists()
    })
  })
}

const resetSearch = () => {
  searchForm.value = {}
  getLists()
}

const handleCurrentChange = (val: number) => {
  pager.page = val
  getLists()
}
getLists()
</script>

<style scoped>
.admin-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 搜索卡片 */
.search-card {
  background: white;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}


.search-grid {
  display: flex;
}


/* 表格卡片 */
.table-card {
  background: white;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.table-header {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

/* 现代化表格 */
.modern-table {
  flex: 1;
}

:deep(.el-table__header-wrapper) {
  border-radius: 8px 8px 0 0;
}

:deep(.el-table__body-wrapper) {
  border-radius: 0 0 8px 8px;
}

/* 用户信息样式 */
.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #e5e7eb;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nickname {
  font-weight: 600;
  color: #111827;
  font-size: 13px;
}

.account {
  font-size: 11px;
  color: #6b7280;
}

/* 时间信息样式 */
.time-info {
  text-align: center;
}

.time-label {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 2px;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* 分页样式 */
.pagination-container {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-container {
    padding: 10px;
  }

  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .search-grid {
    grid-template-columns: 1fr;
  }

  .search-actions {
    justify-content: flex-end;
  }
}
</style>
